3-7 v

影像物件也是一個內建的物件，可以由兩種方式產生：

由網頁的影像標籤 <img> 所產生，並經由 id 屬性來取得影像物件。
由 new Image() 來產生新的影像物件，並可指定其對應影像網址，以達到快取（Cache）功能。
在以下的範例中，我們直接抓取網頁中的影像標籤，來列出其性質，範例如下：
Example（imageProp02.htm）：
經由 for-in 迴圈的使用，上述範例的完整原始檔案相當簡短：
原始檔（imageProp02.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<title>取自網頁影像標籤之 Image 物件的性質</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>取自網頁影像標籤之 Image 物件的性質</h2>
<hr>
<center><img id=myImage src="image/19980425/0041.jpg" height=200></center>
<script>
// 列舉影像物件的所有性質
for (prop in myImage)
	document.write("<br>myImage." + prop + " = " + myImage[prop]);
</script>

<hr>
</body>
</html>
在上述範例中，可以看出，比較常用的性質如下：

src：影像的網址。
tagName：標籤名稱（即是IMG）。
id ：id名稱
naturalWidth：原始影像的寬度，以像素為單位。
naturalHeight：原始影像的高度，以像素為單位。
clientWidth：網頁顯示影像的寬度，以像素為單位。
clientHeight：網頁顯示影像的高度，以像素為單位。
ownerDocument：影像所在的文件。
此外，在上述範例中，你會看到影像圖檔會呈現兩次，那是因為 myImage.outerHTML 就是顯示此影像的標籤，所以你會看到此影像。一般而言，對於一個由 HTML 的標籤所形成的物件 obj 而言，obj.outerHTML 是包含前後標籤的 HTML 原始文字，而 obj.innerHTML 則是不包含前後標籤的 HTML 原始文字。例如，如果我們使用 obj 代表下列物件： <a target=_blank href="myHome.htm">linked text</a> 則

obj.outerHTML = <a target=_blank href="myHome.htm">linked text</a>
obj.innerHTML = linked text
在下列範例中，我們先產生一個影像物件，再指定其網址，最後將此影像物件的所有性質印出來，範例如下：
Example（imageProp01.htm）：
得到的結果和前一個範例非常類似，上述範例的完整原始檔案如下：
原始檔（imageProp01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<title>Image 物件的性質</title>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>Image 物件的性質</h2>
<hr>

<script>
myImage = new Image();
myImage.src = "image/19980425/0001.jpg";
// 列舉影像物件的所有性質
for (prop in myImage)
	document.write("<br>myImage." + prop + " = " + myImage[prop]);
</script>

<hr>
</body>
</html>
（在嘗試上述範例時，請先確認 myImage.src 是指到一個有效的影像檔案路徑。）特別要說明的是，一旦指定網址，影像物件就會把各種相關資訊從網址抓回來，因此若可以事先指定多個影像物件的網址，就可以達到快取的功能。有關快取的說明與範例，請見下一章有關於陣列物件的說明。）
Hint
據筆者所知，JavaScript 目前並沒有相關的 audio 物件，可以達到快取的功能。若有讀者知道如何對 audio 物件進行快取，麻煩來信告知，謝謝。
在本節的範例中，都是指定相對路徑，但你也可以指定絕對路徑，可得到類似的結果。
JavaScript 程式設計與應用：用於網頁用戶端